<template>
	<view class="mains">
		<view class="top_search">
			<search-top placeholder="请输入关键词" @mySearch="mySearch"></search-top>
		</view>
		<view class="nav">
			<u-tabs :list="lists" active-color="#4DC0D9" font-size="36" bar-width="120" :is-scroll="false"
				:current="current" @change="change"></u-tabs>
			<view class="line">
				<u-line color="#ccc" />
			</view>
		</view>
		<view class="side_nav">
			<scroll-view scroll-x="true">
				<view class="btn_display">
					<view v-for="(n,k) in sideNav">
						<view class="p-l-20">
							<u-button :custom-style="customStyle" hover-class="none" shape="circle" size="mini"
								throttle-time="100" v-show="k == currentType">{{n.name}}</u-button>
						</view>
						<view class="p-l-20">
							<u-button :custom-style="NoColor" hover-class="none" @click="selType(n,k)" shape="circle"
								size="mini" throttle-time="100" v-show="k != currentType">{{n.name}}</u-button>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="card" v-for="(n,k) in list" :key="n.id" v-if="list.length>0">
			<view class="card_content">
				<!-- 预约流水号 -->
				<view class="num_top">
					<view class="">
						预约流水号：{{curString(n.ghOrderNo,15) }}
					</view>
					<view :class="[OrderStatus(n.state)]">
						{{dictStatus(n.state)}}
					</view>
				</view>
				<!-- 患者 -->
				<view class="text">
					<view class="">
						就诊患者
					</view>
					<view class="user">
						{{n.patientName}}
					</view>
				</view>
				<view class="text">
					<view class="">
						就诊时间
					</view>
					<view class="user">
						<view class="">
							{{n.serviceDate}} {{n.serviceWeek}}
						</view>
						<view style="text-align: end;">
							{{n.serviceStartTime}}-{{n.serviceEndTime}}
						</view>
					</view>
				</view>
				<view class="bottom">
					<view class="btn">
						<view class="m-r-24">
							<u-button :custom-style="btn" hover-class="none" shape="circle" size="mini"
								throttle-time="100" @click="result(n.id)" v-if="n.state == 1">就诊完成</u-button>
						</view>
						<view class="m-r-24">
							<u-button :custom-style="btn" hover-class="none" shape="circle" size="mini"
								throttle-time="100" @click="UserCancel(n.id)" v-if="n.state == 1">患者违约</u-button>
						</view>
						<view class="m-r-24">
							<u-button :custom-style="btn" hover-class="none" shape="circle" size="mini"
								throttle-time="100" @click="details(n.id,n.ghOrderNo)">订单详情</u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="job_empty" v-if="empty">
			<view class="">
				<u-image width="335rpx" height="320rpx" :src="actionImg"></u-image>
			</view>
			<view class="empty_text">
				暂无订单
			</view>
		</view>
		<u-modal v-model="openRes" title="就诊结果" @confirm="jiuzhenRes" @cancel="jiuzhenCancel" :show-cancel-button="true"
			confirm-text="提交" confirm-color="#4DC0D9" :title-style="myTitle">
			<view class="slot-content">
				<u-input v-model="resultText" type="textarea" height="300" :border="true"
					placeholder="基于患者基础情况和病情，如实填写患者诊断结果" :border-color="borderColor" />
			</view>
		</u-modal>
		<u-modal v-model="canceRes" title="违约确认" @confirm="weiyueConfirm" :content="weiyueTips"
			:show-cancel-button="true" confirm-text="确认" confirm-color="#4DC0D9" :title-style="myTitle"></u-modal>
		<go-nav></go-nav>
	</view>
</template>

<script>
	import {
		orderPage,
		ghOrder
	} from '@/api/index.js'
	import pageMixin from '@/utils/pageMixin.js' //在需要引入的组件中引入
	export default {
		mixins: [pageMixin],
		data() {
			return {
				lists: [{
					name: '今日订单'
				}, {
					name: '预约订单'
				}, {
					name: '历史订单'
				}],
				current: 0,
				customStyle: {
					color: '#4DC0D9',
					fontWeight: 'bold',
					fontSize: '30rpx',
					width: '150rpx'
				},
				NoColor: {
					fontWeight: 'bold',
					fontSize: '30rpx',
					width: '150rpx'
				},
				btn: {
					fontWeight: 'bold',
					fontSize: '32rpx',
					width: '200rpx',
					color: '#212121',
				},
				sideNav: [{
						name: '全部',
						value: null
					},
					{
						name: '已预约',
						value: 1
					},
					{
						name: '已停诊',
						value:2
					},
					{
						name: '已完成',
						value: 0
					},
					{
						name: '已取消',
						value: 4
					},
					{
						name: '已违约',
						value: 5
					},
				],
				params: { //查询接口传值
					state: null, //默认查询全部 sideNav
					searchValue: 1, //默认预约成功
					patientName: ''
				},
				actionImg: require('@/static/img/No_team@2x.png'),
				resultText: '', //就诊结果填写
				currentType: 0,
				openRes: false, //就诊结果弹窗
				canceRes: false, //患者违约弹窗
				weiyueTips: '确定当前患者已违约，确认违约后，患者所预约号将置为失效。',
				myTitle: {
					fontWeight: 'bold'
				},
				id: '' //点击按钮时的id值
			};
		},
		computed: {
			curString(val, num) {
				return (val, num) => {
					if (val && typeof val == 'string') {
						let cut = val.slice(0, num)
						if (val.length > num) {
							return cut + '...'
						} else {
							return cut
						}
					} else {
						if (!val) {
							return ''
						} else {
							let myString = val.toString()
							let cut = myString.slice(0, num)
							if (val.length > num) {
								return cut + '...'
							} else {
								return cut
							}
						}
					}
				}
			},
			dictStatus(num) {
				return (num) => {
					let find = this.sideNav.find(v => v.value == num)
					if (find) {
						return find.name
					} else {
						return '未知状态'
					}
				}
			},
			OrderStatus(val) {
				return (val) => {
					switch (val) {
						case 1: //已预约
							return 'yuyue';
						case 4: //已取消
							return 'quxiao';
						case 2: //已停诊
							return 'weiyue'
						case 3: //已完成
							return 'wancheng'
						case 5: //已违约
							return 'weiyue'
					}
				}
			},
			borderColor() {
				if (this.resultText.length > 0) {
					return '#4DC0D9'
				} else {
					return '#dcdfe6'
				}
			}
		},
		methods: {
			async getMyList(obj) {
				//例如， {..obj,id:15}
				let res = await orderPage({
					...obj,
					...this.params
				})
				return res
			},
			// async getPage(){
			// 	let res = await orderPage()
			// 	console.log(res);
			// },
			async jiuzhenRes() {
				let res = await ghOrder({
					id: this.id,
					state: 0,
					diagnosiDesc: this.resultText
				}) //已违约为5，固定参数
				if (res.code == 200) {
					this.$u.toast(res.msg, 3000)
					this.clearPageStatus()
					this.getTeam()
				}
				//this.$u.toast('提交成功', 3000)
				//this.resultText = ''  //就诊结果填写
			},
			jiuzhenCancel() {
				this.resultText = '' //就诊结果填写清空
			},
			mySearch(val) {
				this.params.patientName = val
				this.clearPageStatus()
				this.getTeam()
				//console.log(val);
			},
			change(index) {
				this.current = index;
				this.params.searchValue = index + 1
				this.clearPageStatus()
				this.getTeam()
			},
			selType(n, k) {
				this.currentType = k;
				this.params.state = n.value
				this.clearPageStatus()
				this.getTeam()
			},
			result(id) { //就诊完成， 打开就诊结果弹窗
				this.id = id
				this.openRes = true
			},
			UserCancel(id) { //患者违约弹窗
				this.id = id
				this.canceRes = true
			},
			async weiyueConfirm() { //患者违约确认
				// console.log(123);
				// 	return
				let res = await ghOrder({
					id: this.id,
					state: 5
				}) //已违约为5，固定参数
				if (res.code == 200) {
					this.$u.toast(res.msg, 3000)
					this.clearPageStatus()
					this.getTeam()
				}

			},
			details(id, ghOrderNo) { //订单详情
				//this.id = id
				if (!ghOrderNo) {
					this.$u.toast('暂未查询到订单号', 3000)
					return
				}
				uni.navigateTo({
					url: `/pages/index/order/details?ghOrderNo=${ghOrderNo}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mains {
		// position: absolute;
		min-height: 100vh;
		// min-width: 100vw;
		background-color: #f8f8f8;
		padding-bottom: 300rpx;

		.top_search {
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			background-color: white;
		}

		.nav {
			position: relative;

			.line {
				position: absolute;
				z-index: 2;
				width: 100%;
				top: 36px;
			}
		}

		.side_nav {
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			background-color: white;

			.btn_display {
				display: flex;
				//justify-content: space-around;
			}
		}

		.card {
			background-color: white;
			margin-top: 20rpx;

			.card_content {
				font-weight: 600;
				font-size: 30rpx;
				color: #212121;
				line-height: 35rpx;

				.num_top {
					display: flex;
					justify-content: space-between;
					padding: 24rpx;
					border-bottom: 1px solid #E8E8E8;

					.yuyue {
						//已预约
						color: #02BA40;
					}

					.quxiao {
						//已取消
						color: #999999;
					}

					.wancheng {
						//已完成
						color: #428EEF;
					}

					.weiyue {
						//已违约
						color: #AC7C00;
					}
				}

				.text {
					display: flex;
					justify-content: space-between;
					padding: 24rpx;

					.user {
						max-width: 442rpx;
						color: #666666;
						font-weight: 500;
					}
				}
			}
		}

		.bottom {
			background-color: white;
			padding-top: 60rpx;
			padding-bottom: 36rpx;

			.btn {
				display: flex;
				justify-content: flex-end;
			}
		}

		.slot-content {
			padding: 42rpx 30rpx;
		}

		.job_empty {
			padding-top: 126rpx;
			min-height: 100vh;
			padding-bottom: 210rpx;
			display: flex;
			flex-direction: column;
			//justify-content: center;
			align-items: center;

			.empty_text {
				font-weight: 500;
				font-size: 36rpx;
				color: #C7C7C7;
				line-height: 1.5;
				text-align: center;
			}
		}
	}
</style>